export const pointerEcharts2 = () => {
    return `



    <template>
    <div
      class="content"
   
    >
     <div :ref="echartsMap" id="mainChina"></div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, nextTick, onMounted, watch } from "vue";
  import "echarts";
  let data = 20.66;
  const barMaxWidth = 50;
let title = '%';
  const state = reactive({
    option:{
    title: {
      "text": '测试',
      "bottom": '20%',
      x:'center',
      "textStyle": {
        "fontSize":20,
        "fontWeight": "bold",
        "color": "#fff"
      }
    },
         angleAxis: {
                show: false,
                max: 100 * 360 / 270, //-45度到225度，二者偏移值是270度除360度
                type: 'value',
                startAngle: 225, //极坐标初始角度
                splitLine: {
                    show: false
                }
            },

    barMaxWidth: barMaxWidth, //圆环宽度
    radiusAxis: {
    show: false,
    type: 'category',
    },
    //圆环位置和大小
    polar: {
    center: ['50%', '50%'],
    radius: '130%',
    },
    series: [
    {
      type: 'bar',
      stack: '测试',
      data: [
        {
          //上层圆环，显示数据
          value: data,
          name: 'sdfasdf',
          itemStyle: {
            color: { // 颜色渐变
                 colorStops: [{
                   offset: 0,
                   color: '#008AFF' // 0% 处的颜色
                 }, {
                   offset: 1,
                   color: '#00D5FF' // 100% 处的颜色1
                 }]
            },
          },
        },
      ],
      barGap: '-100%', //柱间距离,上下两层圆环重合
      coordinateSystem: 'polar',
      roundCap: true, //顶端圆角从 v4.5.0 开始支持
      z: 2, //圆环层级，同zindex
    },
    {
      //下层圆环，显示最大值
      type: 'bar',
      data: [
        {
          value: 100,
          itemStyle: {
            color: {
              //图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1, //从左到右 0-1
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: '#013C82',
                },
                {
                  offset: 1,
                  color: '#013C82',
                },
              ],
            },
          },
        },
      ],
      barGap: '-100%',
      coordinateSystem: 'polar',
      roundCap: true,
      z: 1,
    },
    {
      stack: '测试',
      type: 'bar',
      data: [0.1],
      showBackground: false,
      coordinateSystem: 'polar',
      roundCap: true,
      barWidth: barMaxWidth,
      itemStyle: {
        color: '#00D5FF',
        borderColor: '#FFF',
        borderWidth: 4,
        shadowColor: 'rgb(220,197,239)',
      },
    },
    {
      name: '外部刻度',
      type: 'gauge',
      //  center: ['20%', '50%'],
      radius: '70%',
      splitNumber: 4, //刻度数量
      axisLine: {
        show: false,
      },
      //仪表盘文字
      axisLabel: {
        show: false,
    
      }, //刻度标签。
      axisTick: {
        show: false,
    
      }, //刻度样式
      splitLine: {
        show: false,
    
      }, //分隔线样式
      detail: {
        show: false,
    
      },
      pointer: {
        show: false,
      },
      title: {
        show: true,
        offsetCenter: [0, 0],
        textStyle: {
          fontSize: 62,
          color: '#00DEFF',
          fontWeight:600,
    
        },
      },
      data: [
        {
          value: 100,
          name: data
        },
      ],
    },
    ],
}
    
  });
  let echartsMapel = ref("");
  let opt = null;
  const echartsMap = (e) => (echartsMapel.value = e);
  const init = () => {
    let myChart = echarts.init(echartsMapel.value);
    myChart.setOption(state.option);
    const setOption = (dataObj) => {
      let opt = myChart.getOption();
      Object.assign(opt, dataObj);
      myChart.setOption(opt);
    };
    return setOption;
  };
  
  onMounted(() => {
    init();
  });
  </script>
  
  <style scoped >
  .content {
    position: relative;
    width: 100%;
    box-shadow: 0px 3px 50px 1px rgba(0, 101, 175, 0.4);
  }
  #mainChina {
    width: 100%;
    height: 600px;
    background-color: #00184F;
  }
  </style>
  
    
    `;
  };
  